import * as THREE from 'three';
import '../../css/base.css'
import {baseUrl as baseUrl2} from '../../js/base.js'


let canvas = document.getElementById("canvas")
let renderer, scene, camera;
let orbitControls, flyControls, pointerLockControls;
let startX, startY;
let v = .002, euler = new THREE.Euler(0, 0, 0, 'YXZ'), PI_2 = Math.PI / 2;

const clock = new THREE.Clock();

function initCSR() {
  camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100000)

  scene = new THREE.Scene()

  renderer = new THREE.WebGLRenderer({canvas, preserveDrawingBuffer: true, antialias: true, alpha: true});
  camera.updateProjectionMatrix();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight, false)
}

function initModel() {
  //前后上下左右
  let baseUrl = baseUrl2 + 'static/images/vrLook/'
  let arrImg = [
    loadTexture(baseUrl + 'O1_f.webp'),
    loadTexture(baseUrl + 'O1_b.webp'),
    loadTexture(baseUrl + 'O1_u.webp'),
    loadTexture(baseUrl + 'O1_d.webp'),
    loadTexture(baseUrl + 'O1_l.webp'),
    loadTexture(baseUrl + 'O1_r.webp'),
  ]
  let geometry = new THREE.BoxGeometry(1000, 1000, 1000);
  let material = new THREE.MultiMaterial(arrImg)
  let mesh = new THREE.Mesh(geometry, material)

  scene.add(mesh)
}

function initControls() {
  // flyControls
  {
    // flyControls = new FlyControls(camera, canvas)
    // flyControls.movementSpeed = 1000;
    // flyControls.domElement = renderer.domElement;
    // flyControls.rollSpeed = Math.PI /12;
    // flyControls.autoForward = false;
    // flyControls.dragToLook = false;
  }
  // pointerLockControls
  {
    // pointerLockControls = new PointerLockControls(camera, document.body);
    // pointerLockControls.addEventListener('lock', () => menu.style.display = 'none');
    // pointerLockControls.addEventListener('unlock', () => menu.style.display = 'block');
  }


  canvas.addEventListener('touchstart', start, false)
  canvas.addEventListener('touchmove', move, false)
  canvas.addEventListener('mousedown', ev => {
    start(ev)
    canvas.addEventListener('mousemove', move, false)
  }, false)
  canvas.addEventListener('mouseup', () => {
    canvas.removeEventListener('mousemove', move)
  }, false)
  canvas.addEventListener('mouseout', () => {
    canvas.removeEventListener('mousemove', move)
  }, false)
}

function start(e) {
  startX = e.pageX || e.touches[0].pageX
  startY = e.pageY || e.touches[0].pageY
}

function move(e) {
  euler.setFromQuaternion(camera.quaternion);
  const pageX = e.pageX || e.touches[0].pageX, pageY = e.pageY || e.touches[0].pageY
  euler.y -= (startX - pageX) * v;
  euler.x -= (startY - pageY) * v;
  euler.x = Math.max(-PI_2, Math.min(PI_2, euler.x));
  camera.quaternion.setFromEuler(euler);

  startX = pageX
  startY = pageY
}

function loadTexture(url) {
  let textureLoader = new THREE.TextureLoader();
  let texture = textureLoader.load(url)
  // texture.offset.x = 1
  // texture.repeat.x = -1
  console.log(texture)
  const material = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true,
    side: THREE.DoubleSide
  });
  return material
}

function render() {
  if (orbitControls) orbitControls.update();
  if (flyControls) flyControls.update(clock.getDelta());
  renderer.render(scene, camera)
}

function animation() {
  requestAnimationFrame(animation)
  render()
}

function saveImage(fileName) {
  const image = new Image();
  const base64 = canvas.toDataURL("image/webp", .1);
  image.src = base64;
  const a = document.createElement('a');
  a.href = base64;
  a.download = fileName || '图片名字';
  a.click();
}

(() => {
  initCSR();
  initModel();
  initControls();
  animation();
  window.addEventListener('resize', ev => {
    renderer.setPixelRatio(window.devicePixelRatio);
    camera.aspect = canvas.offsetWidth / canvas.offsetHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight, false)
  });
  canvas.onclick = () => {
    return
    const deg = [
      {x: 90, y: 0, z: 0, fileName: 'O1_u'},
      {x: -90, y: 0, z: 0, fileName: 'O1_d'},
      {x: 0, y: -90, z: 0, fileName: 'O1_f'},
      {x: 0, y: 90, z: 0, fileName: 'O1_b'},
      {x: 0, y: 0, z: 0, fileName: 'O1_r'},
      {x: 0, y: 180, z: 0, fileName: 'O1_l'},
    ]
    let count = 0

    function fun(params) {
      euler.set(THREE.MathUtils.degToRad(params.x), THREE.MathUtils.degToRad(params.y), THREE.MathUtils.degToRad(params.z), 'XYZ')
      camera.quaternion.setFromEuler(euler);
      console.log(JSON.stringify(euler))
      setTimeout(() => {
        saveImage(deg[count].fileName)
        if (deg[++count]) fun(deg[count])
      }, 100)
    }

    fun(deg[0])
  };
})();

